<template>
  <!--
      作者：wangxw
      时间：2020-06-10
      描述：页面-页面列表
  -->
  <el-dialog
    title="分类页设置"
    :visible.sync="dialogVisible"
    width="800px"
    :before-close="handleClose">
    <div class="d-s-s" style="height: 500px">
      <!--分类不同样式展示-->
      <div class="model-container">
        <div class="img-box">
          <el-image v-if="formData.category_style==10" :src="category_10" fit="fill" style="height: 500px"></el-image>
          <el-image v-if="formData.category_style==20" :src="category_20" fit="fill" style="height: 500px"></el-image>
          <el-image v-if="formData.category_style==30" :src="category_30" fit="fill" style="height: 500px"></el-image>
        </div>
      </div>
      <!--图片展示参数-->
      <div class=" flex-1">
        <div class="param-container">
          <div class="common-form"><span>{{formData.region_name}}</span></div>
          <el-form size="small" :model="formData" label-width="100px">
            <el-form-item label="分享标题：">
              <el-input v-model="formData.share_title"></el-input>
            </el-form-item>
            <el-form-item label="分类页样式：">
              <el-radio-group v-model="formData.category_style">
                <el-radio :label="10">一级分类(大图)</el-radio>
                <el-radio :label="20">一级分类(小图)</el-radio>
                <el-radio :label="30">二级分类</el-radio>
              </el-radio-group>
              <p class="gray9">建议：一级分类(大图)尺寸建议710*300，其它均为等比图片即可，如：240*240</p>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="Submit">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
import PageApi from '@/api/page.js';
import Model from './diy/Preview.vue';
import category_10 from "@/assets/img/category_10.jpg";
import category_20 from "@/assets/img/category_20.jpg";
import category_30 from "@/assets/img/category_30.jpg";

export default {
  components: {
    Model,
  },
  data() {
    return {
      dialogVisible: false,
      /*展示样式*/
      category_10: category_10,
      category_20: category_20,
      category_30: category_30,
    };
  },
  props: ['showEdit','formData'],
  watch: {
    showEdit(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit("update:showEdit", val);
    }
  },
  created() {

  },
  methods: {
    Submit() {
      let self = this;
      self.loading = true;
      let Params = self.formData;
      PageApi.postCategory(Params, true)
        .then(data => {
          self.loading = false;
          self.$message({
            message: '恭喜你，修改成功',
            type: 'success'
          });
          self.$emit("update:showEdit", false);
          self.$emit("refreshData");
        })
        .catch(error => {
          self.loading = false;
        });
    },
    handleClose(){
      this.$emit("update:showEdit", false);
    }
  }
};
</script>
<style>

.diy-preview .diy-phone {
  width: 375px;
  margin-right: 20px;
  flex-shrink: 0;
}

.diy-preview .diy-phone .btn-edit-del {
  display: none;
}

.diy-preview .diy-phone .diy-phone-container .diy-phone-item > div:hover, .diy-preview .diy-phone .diy-phone-container .diy-phone-item.active > div {
  border: 2px solid #f1f1f2;;
}
</style>
